<template>
  <div class="lifespan-management">
    <!-- 功能区域切换 -->
    <div class="function-selector">
      <a-radio-group v-model:value="activeFunction" button-style="solid" size="large">
        <a-radio-button value="overview">寿命概览</a-radio-button>
        <a-radio-button value="calculation">寿命计算</a-radio-button>
        <a-radio-button value="warning">预警管理</a-radio-button>
        <a-radio-button value="tracking">寿命跟踪</a-radio-button>
      </a-radio-group>
    </div>

    <!-- 寿命概览 -->
    <div v-if="activeFunction === 'overview'" class="overview-section">
      <a-row :gutter="[24, 24]">
        <!-- 寿命分布图表 -->
        <a-col :xs="24" :lg="12">
          <a-card title="寿命分布统计" class="chart-card">
            <div class="chart-container">
              <div ref="lifespanChart" class="echarts-container"></div>
            </div>
          </a-card>
        </a-col>

        <!-- 预警统计 -->
        <a-col :xs="24" :lg="12">
          <a-card title="预警级别分布" class="chart-card">
            <div class="warning-stats">
              <div class="warning-item high">
                <div class="warning-icon">⚠️</div>
                <div class="warning-info">
                  <div class="warning-title">高危预警</div>
                  <div class="warning-count">{{ highWarningCount }}</div>
                  <div class="warning-desc">剩余寿命 < 5年</div>
                </div>
              </div>
              <div class="warning-item medium">
                <div class="warning-icon">⚡</div>
                <div class="warning-info">
                  <div class="warning-title">中度预警</div>
                  <div class="warning-count">{{ mediumWarningCount }}</div>
                  <div class="warning-desc">剩余寿命 < 15年</div>
                </div>
              </div>
              <div class="warning-item low">
                <div class="warning-icon">🟢</div>
                <div class="warning-info">
                  <div class="warning-title">正常状态</div>
                  <div class="warning-count">{{ lowWarningCount }}</div>
                  <div class="warning-desc">剩余寿命充足</div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 寿命记录列表 -->
      <a-card title="寿命记录管理" class="records-card">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索姓名或地点" style="width: 250px" @search="handleSearch" />
            <a-select v-model:value="warningFilter" placeholder="预警筛选" style="width: 120px" @change="handleFilterChange">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="high">高危</a-select-option>
              <a-select-option value="medium">中度</a-select-option>
              <a-select-option value="low">正常</a-select-option>
            </a-select>
          </a-space>
        </template>

        <a-table :columns="lifespanColumns" :data-source="filteredLifeRecords" :loading="loading" :pagination="pagination" row-key="id" class="lifespan-table">
          <!-- 姓名列 -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <a-space>
                <a-avatar :src="record.avatar" size="small">
                  {{ record.name?.charAt(0) }}
                </a-avatar>
                <span>{{ record.name }}</span>
                <a-tag :color="record.gender === 'male' ? 'blue' : 'pink'" size="small">
                  {{ record.gender === 'male' ? '男' : '女' }}
                </a-tag>
              </a-space>
            </template>

            <!-- 寿命信息 -->
            <template v-else-if="column.key === 'lifespan'">
              <a-space direction="vertical" size="small">
                <div>天定：{{ record.destinedLifespan }}岁</div>
                <div v-if="record.status === 'alive'">当前：{{ record.currentAge }}岁</div>
                <div v-else>实际：{{ record.actualLifespan }}岁</div>
              </a-space>
            </template>

            <!-- 剩余寿命 -->
            <template v-else-if="column.key === 'remaining'">
              <div v-if="record.status === 'alive'">
                <div class="remaining-life">{{ record.remainingLife }}年</div>
                <a-progress :percent="Math.round((record.currentAge / record.destinedLifespan) * 100)" :stroke-color="getProgressColor(record.warningLevel)" size="small" />
              </div>
              <div v-else>
                <a-tag color="gray">已故</a-tag>
              </div>
            </template>

            <!-- 预警级别 -->
            <template v-else-if="column.key === 'warning'">
              <a-tag :color="getWarningColor(record.warningLevel)" v-if="record.status === 'alive'">
                {{ getWarningText(record.warningLevel) }}
              </a-tag>
              <span v-else>-</span>
            </template>

            <!-- 操作 -->
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="link" size="small" @click="showDetail(record)"> 详情 </a-button>
                <a-button type="link" size="small" @click="editLifespan(record)"> 编辑 </a-button>
                <a-button type="link" size="small" danger @click="adjustLifespan(record)" v-if="record.status === 'alive'"> 调整寿命 </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 寿命计算器 -->
    <div v-if="activeFunction === 'calculation'" class="calculation-section">
      <a-row :gutter="[24, 24]">
        <!-- 基础信息计算 -->
        <a-col :xs="24" :lg="12">
          <a-card title="基础寿命计算" class="calculator-card">
            <a-form :model="calculationForm" layout="vertical">
              <a-form-item label="姓名">
                <a-input v-model:value="calculationForm.name" placeholder="请输入姓名" />
              </a-form-item>
              <a-form-item label="出生日期">
                <a-date-picker v-model:value="calculationForm.birthDate" placeholder="选择出生日期" style="width: 100%" />
              </a-form-item>
              <a-form-item label="性别">
                <a-radio-group v-model:value="calculationForm.gender">
                  <a-radio value="male">男</a-radio>
                  <a-radio value="female">女</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="出生地">
                <a-input v-model:value="calculationForm.location" placeholder="请输入出生地" />
              </a-form-item>
              <a-form-item label="职业">
                <a-select v-model:value="calculationForm.profession" placeholder="选择职业">
                  <a-select-option value="农民">农民</a-select-option>
                  <a-select-option value="商人">商人</a-select-option>
                  <a-select-option value="学者">学者</a-select-option>
                  <a-select-option value="工匠">工匠</a-select-option>
                  <a-select-option value="官员">官员</a-select-option>
                  <a-select-option value="军人">军人</a-select-option>
                  <a-select-option value="僧侣">僧侣</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="calculateLifespan" block> 计算天定寿命 </a-button>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>

        <!-- 计算结果 -->
        <a-col :xs="24" :lg="12">
          <a-card title="计算结果" class="result-card">
            <div v-if="calculationResult" class="calculation-result">
              <div class="result-item">
                <div class="result-label">基础寿命</div>
                <div class="result-value">{{ calculationResult.baseLifespan }}岁</div>
              </div>
              <div class="result-item">
                <div class="result-label">性别调整</div>
                <div class="result-value">{{ calculationResult.genderAdjustment > 0 ? '+' : '' }}{{ calculationResult.genderAdjustment }}岁</div>
              </div>
              <div class="result-item">
                <div class="result-label">职业调整</div>
                <div class="result-value">{{ calculationResult.professionAdjustment > 0 ? '+' : '' }}{{ calculationResult.professionAdjustment }}岁</div>
              </div>
              <div class="result-item">
                <div class="result-label">地域调整</div>
                <div class="result-value">{{ calculationResult.locationAdjustment > 0 ? '+' : '' }}{{ calculationResult.locationAdjustment }}岁</div>
              </div>
              <div class="result-item">
                <div class="result-label">业力调整</div>
                <div class="result-value">{{ calculationResult.karmaAdjustment > 0 ? '+' : '' }}{{ calculationResult.karmaAdjustment }}岁</div>
              </div>
              <div class="result-divider"></div>
              <div class="result-item total">
                <div class="result-label">天定寿命</div>
                <div class="result-value">{{ calculationResult.totalLifespan }}岁</div>
              </div>
              <div class="result-actions">
                <a-button type="primary" @click="saveCalculation"> 保存记录 </a-button>
                <a-button @click="resetCalculation"> 重新计算 </a-button>
              </div>
            </div>
            <div v-else class="empty-result">
              <a-empty description="请填写信息并计算寿命" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 预警管理 -->
    <div v-if="activeFunction === 'warning'" class="warning-section">
      <a-card title="寿命预警管理" class="warning-card">
        <template #extra>
          <a-space>
            <a-button type="primary" @click="refreshWarnings">
              <ReloadOutlined />
              刷新预警
            </a-button>
            <a-button @click="exportWarnings">
              <ExportOutlined />
              导出预警
            </a-button>
          </a-space>
        </template>

        <a-tabs v-model:activeKey="warningTab" type="card">
          <!-- 高危预警 -->
          <a-tab-pane key="high" tab="高危预警">
            <WarningList :warnings="highWarnings" level="high" @handle="handleWarning" />
          </a-tab-pane>

          <!-- 中度预警 -->
          <a-tab-pane key="medium" tab="中度预警">
            <WarningList :warnings="mediumWarnings" level="medium" @handle="handleWarning" />
          </a-tab-pane>

          <!-- 预警设置 -->
          <a-tab-pane key="settings" tab="预警设置">
            <WarningSettings @update="updateWarningSettings" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>

    <!-- 寿命跟踪 -->
    <div v-if="activeFunction === 'tracking'" class="tracking-section">
      <a-card title="寿命跟踪管理" class="tracking-card">
        <LifespanTracking />
      </a-card>
    </div>

    <!-- 详情对话框 -->
    <a-modal v-model:open="showDetailModal" title="寿命详情" width="800px" :footer="null">
      <LifespanDetail :record="selectedRecord" @close="showDetailModal = false" @update="handleDetailUpdate" />
    </a-modal>

    <!-- 编辑对话框 -->
    <a-modal v-model:open="showEditModal" title="编辑寿命" width="600px" :footer="null">
      <EditLifespanForm :record="selectedRecord" @success="handleEditSuccess" @cancel="showEditModal = false" />
    </a-modal>

    <!-- 寿命调整对话框 -->
    <a-modal v-model:open="showAdjustModal" title="寿命调整" width="500px" :footer="null">
      <AdjustLifespanForm :record="selectedRecord" @success="handleAdjustSuccess" @cancel="showAdjustModal = false" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { ReloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { useLifeDeathStore } from '@/stores/lifeDeath'
import WarningList from './WarningList.vue'
import WarningSettings from './WarningSettings.vue'
import LifespanTracking from './LifespanTracking.vue'
import LifespanDetail from './LifespanDetail.vue'
import EditLifespanForm from './EditLifespanForm.vue'
import AdjustLifespanForm from './AdjustLifespanForm.vue'

// Store
const lifeDeathStore = useLifeDeathStore()

// 响应式数据
const activeFunction = ref('overview')
const searchKeyword = ref('')
const warningFilter = ref('all')
const warningTab = ref('high')
const showDetailModal = ref(false)
const showEditModal = ref(false)
const showAdjustModal = ref(false)
const selectedRecord = ref(null)
const lifespanChart = ref(null)
let chartInstance = null // ECharts实例

// 计算表单
const calculationForm = ref({
  name: '',
  birthDate: null,
  gender: 'male',
  location: '',
  profession: ''
})

const calculationResult = ref(null)

// 表格列定义
const lifespanColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '寿命信息',
    key: 'lifespan',
    width: 120
  },
  {
    title: '剩余寿命',
    key: 'remaining',
    width: 120
  },
  {
    title: '预警级别',
    key: 'warning',
    width: 100
  },
  {
    title: '地点',
    dataIndex: 'location',
    key: 'location',
    width: 150
  },
  {
    title: '职业',
    dataIndex: 'profession',
    key: 'profession',
    width: 100
  },
  {
    title: '更新时间',
    dataIndex: 'lastUpdate',
    key: 'lastUpdate',
    width: 180,
    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right'
  }
]

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 计算属性
const loading = computed(() => lifeDeathStore.loading)

const filteredLifeRecords = computed(() => {
  let records = lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive')

  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    records = records.filter((record) => record.name.toLowerCase().includes(keyword) || record.location.toLowerCase().includes(keyword))
  }

  if (warningFilter.value !== 'all') {
    records = records.filter((record) => record.warningLevel === warningFilter.value)
  }

  pagination.value.total = records.length
  return records
})

const highWarningCount = computed(() => lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive' && record.warningLevel === 'high').length)

const mediumWarningCount = computed(() => lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive' && record.warningLevel === 'medium').length)

const lowWarningCount = computed(() => lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive' && record.warningLevel === 'low').length)

const highWarnings = computed(() => lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive' && record.warningLevel === 'high'))

const mediumWarnings = computed(() => lifeDeathStore.filteredLifeRecords.filter((record) => record.status === 'alive' && record.warningLevel === 'medium'))

// 方法
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

const handleFilterChange = () => {
  // 过滤逻辑已在computed中处理
}

const getWarningColor = (level) => {
  const colors = {
    high: 'red',
    medium: 'orange',
    low: 'green',
    none: 'default'
  }
  return colors[level] || 'default'
}

const getWarningText = (level) => {
  const texts = {
    high: '高危',
    medium: '中度',
    low: '正常',
    none: '-'
  }
  return texts[level] || '-'
}

const getProgressColor = (level) => {
  const colors = {
    high: '#ff4d4f',
    medium: '#faad14',
    low: '#52c41a',
    none: '#d9d9d9'
  }
  return colors[level] || '#d9d9d9'
}

const showDetail = (record) => {
  selectedRecord.value = record
  showDetailModal.value = true
}

const editLifespan = (record) => {
  selectedRecord.value = record
  showEditModal.value = true
}

const adjustLifespan = (record) => {
  selectedRecord.value = record
  showAdjustModal.value = true
}

const calculateLifespan = () => {
  if (!calculationForm.value.name || !calculationForm.value.birthDate) {
    message.warning('请填写完整信息')
    return
  }

  // 基础寿命 (60-80岁)
  const baseLifespan = 60 + Math.floor(Math.random() * 21)

  // 性别调整 (女性通常较长寿)
  const genderAdjustment = calculationForm.value.gender === 'female' ? 3 : 0

  // 职业调整
  const professionAdjustments = {
    农民: 2,
    商人: 0,
    学者: 5,
    工匠: 1,
    官员: -2,
    军人: -5,
    僧侣: 8
  }
  const professionAdjustment = professionAdjustments[calculationForm.value.profession] || 0

  // 地域调整 (模拟不同地区的环境影响)
  const locationAdjustment = Math.floor(Math.random() * 7) - 3

  // 业力调整 (随机模拟，实际应基于具体业力值)
  const karmaAdjustment = Math.floor(Math.random() * 11) - 5

  const totalLifespan = baseLifespan + genderAdjustment + professionAdjustment + locationAdjustment + karmaAdjustment

  calculationResult.value = {
    baseLifespan,
    genderAdjustment,
    professionAdjustment,
    locationAdjustment,
    karmaAdjustment,
    totalLifespan: Math.max(30, totalLifespan) // 最小30岁
  }
}

const saveCalculation = async () => {
  if (!calculationResult.value) return

  try {
    const recordData = {
      ...calculationForm.value,
      birthDate: calculationForm.value.birthDate.format('YYYY-MM-DD'),
      destinedLifespan: calculationResult.value.totalLifespan,
      karmaScore: Math.floor(Math.random() * 200) - 100 // 模拟业力分数
    }

    await lifeDeathStore.addLifeRecord(recordData)
    message.success('寿命记录保存成功')
    resetCalculation()
  } catch (error) {
    message.error('保存失败: ' + error.message)
  }
}

const resetCalculation = () => {
  calculationForm.value = {
    name: '',
    birthDate: null,
    gender: 'male',
    location: '',
    profession: ''
  }
  calculationResult.value = null
}

const refreshWarnings = () => {
  message.success('预警信息已刷新')
}

const exportWarnings = () => {
  const warnings = [...highWarnings.value, ...mediumWarnings.value]
  const csvContent = [
    ['姓名', '性别', '当前年龄', '天定寿命', '剩余寿命', '预警级别', '地点'].join(','),
    ...warnings.map((w) => [w.name, w.gender === 'male' ? '男' : '女', w.currentAge, w.destinedLifespan, w.remainingLife, getWarningText(w.warningLevel), w.location].join(','))
  ].join('\n')

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `寿命预警_${dayjs().format('YYYY-MM-DD')}.csv`
  link.click()

  message.success('预警数据导出成功')
}

const handleWarning = (record, action) => {
  message.success(`已${action}预警: ${record.name}`)
}

const updateWarningSettings = (settings) => {
  message.success('预警设置已更新')
}

const handleDetailUpdate = () => {
  showDetailModal.value = false
  message.success('信息更新成功')
}

const handleEditSuccess = () => {
  showEditModal.value = false
  message.success('寿命信息编辑成功')
}

const handleAdjustSuccess = () => {
  showAdjustModal.value = false
  message.success('寿命调整成功')
}

const drawLifespanChart = () => {
  if (!lifespanChart.value) return

  const chartDom = lifespanChart.value

  // 如果已存在实例，先销毁
  if (chartInstance) {
    chartInstance.dispose()
  }

  chartInstance = echarts.init(chartDom)

  const records = lifeDeathStore.filteredLifeRecords

  // 简单的寿命分布柱状图
  const ageGroups = {
    '0-20': 0,
    '21-40': 0,
    '41-60': 0,
    '61-80': 0,
    '81-100': 0,
    '100+': 0
  }

  records.forEach((record) => {
    const age = record.status === 'alive' ? record.currentAge : record.actualLifespan
    if (age <= 20) ageGroups['0-20']++
    else if (age <= 40) ageGroups['21-40']++
    else if (age <= 60) ageGroups['41-60']++
    else if (age <= 80) ageGroups['61-80']++
    else if (age <= 100) ageGroups['81-100']++
    else ageGroups['100+']++
  })

  const labels = Object.keys(ageGroups)
  const data = Object.values(ageGroups)
  const maxValue = Math.max(...data) || 1 // 避免除零错误

  const option = {
    backgroundColor: 'transparent', // 设置背景为透明
    title: {
      text: '年龄分布统计',
      subtext: `总计：${records.length} 条记录`,
      textStyle: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: 'bold'
      },
      subtextStyle: {
        color: 'rgba(255, 255, 255, 0.85)',
        fontSize: 12
      },
      left: 'center',
      top: 10
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(255, 255, 255, 0.2)',
      textStyle: {
        color: '#ffffff'
      },
      formatter: function (params) {
        const param = params[0]
        return `${param.name}岁：${param.value} 人`
      }
    },
    grid: {
      left: '8%',
      right: '4%',
      bottom: '15%',
      top: '25%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisTick: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.85)',
        fontSize: 11,
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.85)',
        fontSize: 11,
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif'
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        barWidth: '60%',
        data: data.map((value, index) => ({
          value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: ['#722ed1', '#8a4de6', '#1890ff', '#52c41a', '#faad14', '#f5222d'][index % 6] },
              { offset: 1, color: ['#722ed1', '#8a4de6', '#1890ff', '#52c41a', '#faad14', '#f5222d'][index % 6] + '80' }
            ]),
            borderRadius: [4, 4, 0, 0]
          }
        })),
        label: {
          show: true,
          position: 'top',
          color: '#ffffff',
          fontSize: 12,
          fontWeight: 'bold',
          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif',
          formatter: function (params) {
            return params.value > 0 ? params.value : ''
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  chartInstance.setOption(option)

  // 处理窗口resize事件
  const handleResize = () => {
    if (chartInstance) {
      chartInstance.resize()
    }
  }

  window.addEventListener('resize', handleResize)

  // 存储resize处理函数以便在组件销毁时移除
  chartInstance._resizeHandler = handleResize
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    drawLifespanChart()
  })
})

onUnmounted(() => {
  // 销毁图表实例和移除事件监听
  if (chartInstance) {
    if (chartInstance._resizeHandler) {
      window.removeEventListener('resize', chartInstance._resizeHandler)
    }
    chartInstance.dispose()
    chartInstance = null
  }
})

// 监听数据变化重新绘制图表
watch(
  () => lifeDeathStore.filteredLifeRecords,
  () => {
    nextTick(() => {
      drawLifespanChart()
    })
  },
  { deep: true }
)

// 监听activeFunction变化，当切换到overview时重新绘制图表
watch(
  () => activeFunction.value,
  (newValue) => {
    if (newValue === 'overview') {
      nextTick(() => {
        drawLifespanChart()
      })
    }
  }
)
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.lifespan-management {
  .function-selector {
    margin-bottom: 24px;
    text-align: center;
  }

  .chart-card {
    .chart-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;

      .echarts-container {
        width: 100%;
        height: 300px;
      }
    }
  }

  .warning-stats {
    .warning-item {
      display: flex;
      align-items: center;
      padding: 16px;
      margin-bottom: 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        background: rgba(255, 255, 255, 0.08);
      }

      .warning-icon {
        font-size: 32px;
        margin-right: 16px;
      }

      .warning-info {
        flex: 1;

        .warning-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 4px;
          color: #ffffff;
        }

        .warning-count {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 4px;
          color: #ffffff;
        }

        .warning-desc {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.65);
        }
      }

      &.high {
        border-left: 4px solid #f44336;
        background: rgba(244, 67, 54, 0.1);
      }

      &.medium {
        border-left: 4px solid #ff9800;
        background: rgba(255, 152, 0, 0.1);
      }

      &.low {
        border-left: 4px solid #4caf50;
        background: rgba(76, 175, 80, 0.1);
      }
    }
  }

  .records-card {
    margin-top: 24px;

    .lifespan-table {
      .remaining-life {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 4px;
      }
    }
  }

  .calculator-card {
    .ant-form {
      .ant-form-item {
        margin-bottom: 16px;
      }
    }
  }

  .result-card {
    .calculation-result {
      .result-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        .result-label {
          font-weight: 500;
          color: rgba(255, 255, 255, 0.85);
        }

        .result-value {
          font-weight: bold;
          color: #1890ff;
        }

        &.total {
          border-bottom: none;
          padding: 16px 0;
          background: rgba(114, 46, 209, 0.2);
          border: 1px solid rgba(114, 46, 209, 0.3);
          border-radius: 8px;
          padding: 16px;
          margin-top: 8px;

          .result-label {
            font-size: 18px;
            color: #ffffff;
          }

          .result-value {
            font-size: 24px;
            color: #ffffff;
          }
        }
      }

      .result-divider {
        height: 1px;
        background: #d9d9d9;
        margin: 16px 0;
      }

      .result-actions {
        display: flex;
        gap: 12px;
        margin-top: 16px;

        .ant-btn {
          flex: 1;
        }
      }
    }

    .empty-result {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;
    }
  }

  .warning-card,
  .tracking-card {
    min-height: 600px;
  }
}
</style>
